import { cookie } from "./tool.js";

class Detail{
    constructor(){

    }
    init(){
      this.jigou();
      this.mob()

    }
    jigou(){
        let sid = location.search.slice(1).split('=')[1];
    if(!sid){
      sid = 1;
    }
    console.log(sid);
    
    $.ajax({
        url:'http://localhost/my-wangyi/backend/detail.php',
        data:{
          sid:sid
        },
        dataType:'json'
      }).then(function(resData){
        console.log(resData);
          $(".opacityBottom img").attr('src',resData.url)
          $('.big_big_img>img').attr('src',resData.url);
          $('.big_img>img').attr('src',resData.url);
          $('#detail_text1').html(resData.title);
          $('.jg').html("￥"+resData.price);
  
        // 渲染小图
        let arrPic = resData.piclist.split(',');
        let strHtml = '';
        $.each(arrPic,function(index,value){
            if(index<5){
                strHtml += `
                <li>
                  <img src="${value}"/>
                </li>
              `;
            }

        });
        $('.min_img ul').html(strHtml);
        // 放大镜效果
        // 1 鼠标移入移出显示隐藏小放和大放
        $('.big_img').hover(function(){
          $('#sf').css('visibility','visible');
          $('.big_big_img').css('visibility','visible');
          // 2.求小放的尺寸,采用公式     大图/小图 = 大放/小放       大图/大放 = 小图/小放
          $('#sf').width($('.big_img').width()*$('.big_big_img').width()/$('#bpic').width());
          $('#sf').height($('.big_img').height()*$('.big_big_img').height()/$('#bpic').height());
          let bili = $('#bpic').width() / $('.big_img').width();

          // 3.小放跟随鼠标移动
          $('.big_img').on('mousemove',function(e){
              // 限定移动范围
              let leftValue = e.pageX - $('.detail_left').offset().left -  $('#sf').width()/2;
              let topValue = e.pageY - $('.detail_left').offset().top- $('#sf').height()/2;
              if(leftValue<0){
                  leftValue = 0;
              }else if(leftValue>=$('.big_img').width() - $('#sf').width()){
                  leftValue=$('.big_img').width() - $('#sf').width()
              }
              if(topValue<0){
                  topValue = 0;
              }else if(topValue>=$('.big_img').height() - $('#sf').height()){
                  topValue=$('.big_img').height() - $('#sf').height()
              }
              $('#sf').css({
                  left:leftValue,
                  top:topValue
              });
              // 大图移动，采用放大的比例。
              $('#bpic').css({
                  left:-leftValue * bili,
                  top:-topValue*bili
              });
          });
         },function(){
          $('#sf').css('visibility','hidden');
          $('.big_big_img').css('visibility','hidden');
         });
  
         // 切换小图
         $('.min_img li').on('mouseover',function(){
          let url = $(this).find('img').attr('src');
          $('.big_img img').attr('src',url);
          $('.big_big_img img').attr('src',url);
          $(".opacityBottom img").attr('src',url)
          $(this).addClass("ac").siblings().removeClass();
         
         
         });

         $(".opacityBottom .left").on("click",function(){
          // console.log( $(".ac").prev().find("img"));
          let url;
          if(!$(".ac").prev()[0]){
            $($(".min_img ul li")[4]).addClass("ac").siblings().removeClass();
            url =$(".ac").find("img").attr('src');
          }else{
            url = $(".ac").prev().find("img").attr('src');
            $(".ac").prev().addClass("ac").siblings().removeClass()
            
            
          }
          $(".opacityBottom img").attr('src',url);
          $('.big_big_img img').attr('src',url);
          $('.big_img img').attr('src',url);
        })

        $(".opacityBottom .right").on("click",function(){
          let url;
          if(!$(".ac").next()[0]){
            $($(".min_img ul li")[0]).addClass("ac").siblings().removeClass();
            url =$(".ac").find("img").attr('src');
          }else{
            url = $(".ac").next().find("img").attr('src');
            $(".ac").next().addClass("ac").siblings().removeClass()
            
            
          }
          $(".opacityBottom img").attr('src',url);
          $('.big_big_img img').attr('src',url);
          $('.big_img img').attr('src',url);
          
        })
      });

      $("#inputs").on("input",function(){
        let reg=/^[1-9]\d*$/;
          if(!reg.test($(this).val())){
            $(this).val(1);
          }else if($(this).val()>99){
            $(this).val(99);
          }

      })


      let localobj={};
      function localtoobj(){
        if(localStorage.getItem('localgoods')){
          localobj=JSON.parse(localStorage.getItem('localgoods'));
        }else{
          localobj={};
        }
      }

      $("#sub").on("click",function(){
        localtoobj();
        if(Object.keys(localobj).includes(sid)){
          localobj[sid]=parseInt($("#inputs").val())+parseInt(localobj[sid]);
        }else{
          localobj[sid]=parseInt($("#inputs").val());
        }
        localStorage.setItem("localgoods",JSON.stringify(localobj))
        alert("加入成功")

      })

    }
    mob(){
                //+
                $('.span_right').on('click',function(){
                  let num = $("#inputs").val();
                  console.log(num);
                  num++;
                  $("#inputs").val(num);
                  storageCount($(this).parents('.cart_mod').attr('sid'),num);
                });
                // -
                $('.span_left').on('click',function(){
                  let num =$("#inputs").val();
                  num--;
                  if(num<1){
                    $("#inputs").val(1);
                  }else{
                    $("#inputs").val(num);
                  }
                  storageCount($(this).parents('.cart_mod').attr('sid'),$(this).next().val());
                });

                $(".big_img").on("click",function(){
                  // (".big_img").parents("#detail").find
                  $(".opacityBottom").attr('style','visibility:visible');
                })
                $(".opacityBottom span").on("click",function(){
                  $(".opacityBottom").attr('style','visibility:hidden');
                })


    }
}
export{
    Detail
}